<div class="mb-2">{{@root.paymentConfig.payway.description}}</div>
<form action="/payway/checkout_action" method="post">
    <div id="payway-credit-card"></div>
    <input id="payway-cc-submit" class="btn btn-outline-success" type="submit" disabled="true" />
</form>
<style>
    #payway-credit-card-iframe0{
        width: 100% !important;
    }
</style>
<script src="https://api.payway.com.au/rest/v1/payway.js">
</script>
<script type="text/javascript">
    var style = {
        'div.payway-card': { 'width' : '100% !important', 'background-color': '#f8f9fa', 'border-radius': '.25rem', 'border': 'none' },
        '#payway-cardNumber': { 'height' : '20px !important' },
        '.payway-card input' : { 'height': '20px !important', 'font-size': '1rem', 'border-radius': '.25rem' },
        '.payway-card select': { 'height': '38px !important' }
    };
    var submit = document.getElementById('payway-cc-submit');
    payway.createCreditCardFrame({
        publishableApiKey: '{{@root.paymentConfig.payway.publishableApiKey}}',
        style,
        layout:'wide',
        onValid: function () { submit.disabled = false; },
        onInvalid: function () { submit.disabled = true; }
    });
</script>